<template>
    <div>
      <div id="search">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form label-width="80px">
              <el-form-item label="选择地区">
                <el-select
                  v-model="province_id"
                  placeholder="请选择地区"
                  @change="getProvince()"
                >
                  <el-option
                    v-for="item in provinceForm"
                    :key="item.id"
                    :label="item.district"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
  
          <el-col :span="4">
            <el-form label-width="80px" v-if="province_id">
              <el-form-item label="选择地区">
                <el-select
                  placeholder="请选择市"
                  v-model="city_id"
                  @change="getCitysForm()"
                >
                  <el-option
                    v-for="item in cityForm"
                    :key="item.id"
                    :label="item.district"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
  
          <el-col :span="4">
            <el-form label-width="80px" v-if="city_id">
              <el-form-item label="选择地区">
                <el-select
                  v-model="district_id"
                  placeholder="请选择县区"
                  @change="getregionCounty()"
                >
                  <el-option
                    v-for="item in countyForm"
                    :key="item.id"
                    :label="item.district"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div id="body">
        <el-table
          :data="tableData"
          ref="container"
          style="width: 100%"
          border
          width="800px"
        >
          <el-table-column label="省份名称"  align="center">
            <template #default="scope">
              <span>{{ scope.row.district }}</span>
            </template>
          </el-table-column>
  
          <el-table-column label="显示状态"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.show_tag == 1">显示</span>
              <span v-else>隐藏</span>
            </template>
          </el-table-column>
  
          <el-table-column label="区域代码"  align="center">
            <template #default="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
  
          <el-table-column label="创建时间" align="center">
            <template #default="scope">
              <span>{{ scope.row.created_at }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div class="page">
        <el-row :span="24">
          <el-col :span="8">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="['10', '20', '50', '100']"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
          <el-col :span="2">
            <span>共有{{ district_s }}个省份</span>
          </el-col>
          <el-col :span="2">
            <span>共有{{ district_t }}市</span>
          </el-col>
          <el-col :span="2">
            <span>共有{{ district_x }}县区</span>
          </el-col>
        </el-row>
      </div>
      <!-- </el-tab-pane> -->
    </div>
  </template>
  
  <script>
  import {
    areaList,
    regionProvince,
    regionCity,
    regionCounty,
  } from "@/api/region/region";
  
  let _self;
  
  export default {
    data() {
      return {
        tableHeight: 400, //计算表格高度
        activeName: "first",
        tableData: [],
        provinceForm: [],
        countyForm: [],
        cityForm: [],
        search: "",
        pageSize: 20, //一页显示多少条
        total: 0,
        pageNumber: 1,
        city_id: "",
        district_id: "",
        pid: "1",
        province_id: "",
        district_s: "",
        district_t: "",
        district_x: 0,
      };
    },
    mounted() {
      _self = this;
      _self.getlist();
      _self.regionProvincesForm();
    },
  
    // watch: {
    //   district_id: {
    //     handler(newName, oldName) {
    //       if (newName!==oldName) {
    //         this.district_id=''
    //       }
    //     },
    //     // 代表在wacth里声明了Name这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    //     immediate: true
    //   },
    //   },
    methods: {
  
      //获取所有省份
      getlist() {
        let param = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          keyWord: this.search,
          city_id: this.city_id,
          district_id: this.district_id,
          pid: this.pid,
          region: 1,
        };
  
        areaList(param)
          .then((result) => {
            if (result.code === 200) {
              this.tableData = result.data.list;
              this.total = result.data.total;
              this.district_s = result.data.district_s;
              this.district_t = result.data.district_t;
              this.district_x = result.data.district_x;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
  
      regionProvincesForm() {
        regionProvince().then((res) => {
          if (res.code == "200") {
            _self.provinceForm = res.data;
            _self.regionCitysForm();
          }
        });
      },
  
      getProvince() {
        let param = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          keyWord: this.search,
          city_id: "",
          pid: this.province_id,
          province_id: this.province_id,
          district_id: "",
          region: 2,
        };
        areaList(param)
          .then((result) => {
            if (result.code === 200) {
              this.tableData = result.data.list;
              this.total = result.data.total;
              this.district_s = result.data.district_s;
              this.district_t = result.data.district_t;
              this.district_x = result.data.district_x;
            }
          })
          .catch((err) => {
            console.log(err);
          });
  
        _self.regionCitysForm();
      },
  
      regionCitysForm() {
        let param = {
          pid: _self.province_id,
        };
  
        regionCity(param).then((res) => {
          if (res.code == "200") {
            _self.cityForm = res.data;
            _self.regionCountyForm();
          }
        });
      },
  
      getCitysForm() {
        let param = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          keyWord: this.search,
          city_id: this.city_id,
          pid: this.city_id,
          province_id: this.province_id,
          district_id: "",
          region: 3,
        };
        areaList(param)
          .then((result) => {
            if (result.code === 200) {
              this.tableData = result.data.list;
              this.total = result.data.total;
              this.district_s = result.data.district_s;
              this.district_t = result.data.district_t;
              this.district_x = result.data.district_x;
            }
          })
          .catch((err) => {
            console.log(err);
          });
        _self.district_id = "";
        _self.regionCountyForm();
      },
  
      getregionCounty() {
        let param = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          keyWord: this.search,
          city_id: this.city_id,
          pid: this.district_id,
          province_id: this.province_id,
          district_id: this.district_id,
          region: 3,
        };
        areaList(param)
          .then((result) => {
            if (result.code === 200) {
              this.tableData = result.data.list;
              this.total = result.data.total;
              this.district_s = result.data.district_s;
              this.district_t = result.data.district_t;
              this.district_x = result.data.district_x;
            }
          })
          .catch((err) => {
            console.log(err);
          });
  
        _self.regionCitysForm();
      },
  
      regionCountyForm: function () {
        let param = {
          pid: _self.city_id,
        };
        regionCounty(param).then((res) => {
          if (res.code == "200") {
            _self.countyForm = res.data;
          }
        });
      },
      handleSizeChange(val) {
        console.log(val);
        _self.pageSize = val;
        _self.getlist();
      },
  
      handleCurrentChange(val) {
        _self.pageNumber = val;
        _self.getlist();
      },
  
      handleSeach() {},
    },
  };
  </script>
  <style lang="scss" scoped>
  .firsthgit {
    margin: 10px;
    margin-top: 1%;
  }
  
  .el-row {
    margin-bottom: 20px;
  
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .el-col {
    border-radius: 4px;
  }
  
  .bg-purple-dark {
    background: #99a9bf;
  }
  
  .bg-purple {
    background: #d3dce6;
  }
  
  .bg-purple-light {
    background: #e5e9f2;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  .el-form-item {
    text-align: center;
  }
  
  .span_dq {
    height: 20px;
    line-height: 20px;
    text-align: center;
  }
  </style>
  